@import 'constants.styl';

.kira-friends-friendWrapper {
  flex: 0 0 25%;
  max-width: 25%;
  position: relative;
  user-select: none;

  & > a {
    position: relative;
    color: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7.5px;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.5s ease;

    &:hover, &:focus {
      text-decoration: none;
      color: unset;
    }

    &::before {
      content: "";
      position: absolute;
      background: $color1;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      transition: all 0.5s ease;
      transform: scale(0, 0);
    }

    & > .kira-friends-avatarWrapper {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      & > img {
        transition: all 0.5s ease !important;
        border-radius: 50%;
      }

      & > img, & > img:hover {
        border-radius: 50% !important;
        box-shadow: none !important;
      }
    }

    & > .kira-friends-blogName {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      position: relative;
      z-index: 1;
      transition: all 0.2s ease;
    }

    &:hover {
      box-shadow: 0 0 16px $krdbgc1;

      &::before {
        transform: scale(1, 1);
      }

      & > .kira-friends-avatarWrapper > img {
        transform: rotateZ(360deg);
      }

      & > .kira-friends-blogName {
        color: #fff;
      }
    }
  } 
}
